@import 'public.less';
html,body{
    height: 100%;
    color: #585858;
    position: relative;
}
.header{
    .pxToRem(height,150);
    .pxToRem(padding-left,30);
    .pxToRem(padding-right,30);
    border-bottom: 1px solid #ececec;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    box-sizing: border-box;
    div{
        .pxToRem(height,60);
        .pxToRem(line-height,60);
        .pxToRem(margin-top,5);
        background:#ebf0f2 url(../images/index-fx/search.png) no-repeat 10px center;
        .pxToRem(background-size,40);
        .pxToRem(padding-left,60);
        .pxToRem(font-size,30);
    }
    ul{
        display: flex;
        justify-content: space-between;
        li{
            flex: 1;
            .pxToRem(font-size,30);
            text-align:center;
            .pxToRem(line-height,85);
            a{
                display: inline-block;
                .pxToRem(height,85);
                color: #585858;
            }
            .active{
                color: #000;
                border-bottom: 1px solid #000;
                box-sizing: border-box;
            }
        }
    }
}

.main{
    .pxToRem(padding-top,150);
    .pxToRem(padding-bottom,100);
    .fx_jx{
        background: #ebf0f2;
        figure{
            .banner{
                width: 100%;
            }
        }
        .topic{
            .pxToRem(margin-top,30);
            background: #fff;
            h2{
                .pxToRem(height,100);
                .pxToRem(line-height,100);
                .pxToRem(padding-left,30);
                .pxToRem(padding-right,30);
                .pxToRem(font-size,26);
                span{
                    float: right;
                }
            }
            .picture{
                background: #fff;
                .pxToRem(padding-left,30);
                .pxToRem(padding-right,30);
                figure{
                    position: relative;
                    .pic{
                        width: 100%;
                    }
                }
                figure:after{
                    content: "#决定健身的那个瞬间#";
                    position: absolute;
                    top:50%;
                    left: 50%;
                    transform:translate(-50%,-50%);
                    color: #fff;
                    .pxToRem(font-size,24);
                }
            }
        }
        .hot{
            .pxToRem(margin-top,30);
            background: #fff;
            .pxToRem(padding-left,30);
            .pxToRem(padding-right,30);
            h2{
                .pxToRem(height,100);
                .pxToRem(line-height,100);
                .pxToRem(font-size,26);
                span{
                    float: right;
                }
            }
            figure{
                img{
                    width: 100%;
                }
            }
        }
    }
    .fx_xl,.fx_ys{
        background: #ebf0f2;
        .banner_xl{
            width: 100%;
        }
        .xl_nav{
            display: flex;
            background: #fff;
            li{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .pxToRem(height,150);
                span{
                    display: inline-block;
                    .pxToRem(margin-top,10);
                }
            }
        }
        .content{
            .pxToRem(margin-top,30);
            background: #fff;
            .pxToRem(padding-left,30);
            .pxToRem(padding-right,30);
            h2{
                .pxToRem(height,100);
                .pxToRem(line-height,100);
                .pxToRem(font-size,26);
                span{
                    float: right;
                }
            }
            .cont{
                img{
                    width: 100%;
                }
            }
        }
    }
    .fx_ys{
        .news{
            .pxToRem(padding-left,30);
            .pxToRem(padding-right,30);
            background: #fff;
            .pxToRem(margin-top,30);
            h2{
                .pxToRem(height,100);
                .pxToRem(line-height,100);
                .pxToRem(font-size,26);
                span{
                    float: right;
                }
            }
            ul{
                display: flex;
                justify-content: space-between;
                border-bottom:1px solid #ccc;
                box-sizing: border-box;
                .pxToRem(padding-bottom,20);
                li{
                    flex:1;
                    img{
                        width: 100%;
                    }
                    p{
                        .pxToRem(margin-top,20);
                        text-align: left;
                    }
                    span{
                        .pxToRem(margin-top,10);
                        text-align: left;
                        display: inline-block;
                    }
                }
                li:nth-child(2){
                    .pxToRem(margin-left,15);
                    .pxToRem(margin-right,15);
                }
            }
            ul:last-child{
                border-bottom:none; 
            }
        }
    }
}


.footer{
    .pxToRem(height,100);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    border-top: 1px solid #ccc;
    a{
        display: block;
        height: 100%;
        width: 25%;
        float: left;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        color: #000;
        text-decoration: none;
        img{
            .pxToRem(width,35)
        }
        p{
            margin-top: 5%;
        }
    }
}